<script setup>
/* import {ref} from "vue"

const count = ref(0)

const addCount = () => {
    count.value++
} */

/* import { inject } from 'vue';
const {count,addCount} = inject("count") */

// import { countStore } from '../store/count';
import { storeToRefs } from 'pinia';
import { useStudentStore } from '../store/studentStore';

const stuStore = useStudentStore()
/* 
    store实例本身就是一个recative对象，
        可以通过它直接访问state中的数据

    但是如果将state中的数据结构出来，那么数据将会失去响应性
*/

// state中的属性（方法），都可以通过store对象直接访问

// 如果想解构后还有响应性，则必须加上storeToRefs()
//  他可以将state和getter中的属性解构为ref属性，从而保留响应性
const{ name,age } = storeToRefs(stuStore)
</script>


<template>
    <h4>
        ComponentC--
        <!-- {{ countStore.count }}--
        <button @click="countStore.addCount">点我一下</button> -->
        {{ name }}--{{ age }}--
    </h4>
    
    
</template>